<script setup>
import { ref, watch } from 'vue'
import FlySituation from './fly-situation.vue'
import FlyNum from './fly-num.vue'
import FlyInfo from './fly-info.vue'
import EachartsComponent from './echarts-component.vue'
import FlyPlan from './fly-plan.vue'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { operationOverviewServer } from '@/api'
import AirAnimation from '@/views/operation/js/airAnimation.js'
import { addSelfLine } from '../js/sightsee.js'
const airAnimation = new AirAnimation()
const airStore = useAirStore()
const { FocusAirId, operationData } = storeToRefs(airStore)
const navBar = ref('运营概况')
const navList = ref(['运营概况', '飞行概况'])
const changeNav = (item) => {
  if (item == '飞行概况') {
    if (!FocusAirId.value) {
      return ElMessage.warning('请先选择直升机')
    }
  } else {
    __g.customObject.focus('air-' + FocusAirId.value, 2000)
    FocusAirId.value = ''
    __g.marker.showByGroupId('wrjMarker')
    airAnimation.clerpolyline()
    addSelfLine()
  }
  navBar.value = item
}

// 获取运营概况信息
const get0perationOverview = async () => {
  const { data } = await operationOverviewServer({ flyType: 3 })
  operationData.value = data
}

watch(navBar, () => {
  get0perationOverview()
})

watch(FocusAirId, (newVal) => {
  if (newVal) {
    navBar.value = '飞行概况'
  } else {
    navBar.value = '运营概况'
  }
})
</script>
<template>
  <RightBox>
    <div class="card">
      <div class="conbox">
        <div class="navbox">
          <p
            v-for="(item, index) in navList"
            :key="index"
            :class="{ active: navBar === item }"
            @click="changeNav(item)"
          >
            {{ item }}
          </p>
        </div>
      </div>
      <div v-if="navBar === '运营概况'">
        <FlySituation></FlySituation>
        <CommonTitle title="运营航线概况" />
        <FlyNum></FlyNum>
        <CommonTitle title="运营架次趋势" />
        <EachartsComponent></EachartsComponent>
        <CommonTitle title="飞行任务列表" />
        <FlyPlan></FlyPlan>
      </div>
      <FlyInfo v-if="navBar === '飞行概况'"></FlyInfo>
    </div>
  </RightBox>
</template>
<style scoped lang="scss">
.card {
  .conbox {
    padding: 2px 15px 10px;
    .navbox {
      display: flex;
      align-items: center;

      p {
        flex: 1;
        padding: 5px 0 10px;
        font-size: 15px;
        opacity: 0.7;
        text-align: center;
        cursor: pointer;
        background: left bottom url('@img/overview/navbar.png') no-repeat;
        background-size: 100% 3px;

        &.active {
          opacity: 1;
          position: relative;
          background: -10px 25px url('@img/overview/navbar_active.png') no-repeat;
          background-size: 120% 20px;

          &::before {
            position: absolute;
            top: 15px;
            left: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_left.png');
            background-size: 100% 100%;
          }

          &::after {
            position: absolute;
            top: 15px;
            right: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_right.png');
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
